<template>
	<div class="evidence-unit-case-container">
		<el-form ref="refSeach" :inline="true" :model="formInline" size="mini">
			<el-form-item label-width="100px" prop="caseName" label="任务名称">
				<el-input v-model="formInline.caseName" placeholder="请输入..."></el-input>
			</el-form-item>
			<el-form-item label-width="100px" prop="caseTime" label="创建时间">
				<el-date-picker
					v-model="formInline.caseTime"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					type="daterange"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					style="width: 220px"
				>
				</el-date-picker>
		  </el-form-item>
		  <el-form-item label-width="100px" label="状态" prop="evidenceStatus">
				<el-select v-model="formInline.Status" placeholder="请选择...">
					<el-option label="请选择" value=""></el-option>
					<el-option label="待同步" :value="0"></el-option>
					<el-option label="待盘点" :value="1"></el-option>
					<el-option label="已盘点" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="margin-left: 20px">
				<el-button type="primary" @click="onSearch" icon="el-icon-search" size="small">查询</el-button>
				<el-button type="primary" @click="onRest" icon="el-icon-view" size="small">重置</el-button>
				<el-button type="danger" icon="el-icon-delete" @click="onDelete" size="small">删除</el-button>
			</el-form-item>
		</el-form>
		<el-table
			ref="refCaseTable" border
			:data="tableData"
			:default-sort="{ prop: 'name', order: 'descending' }"
			:row-style="{ height: '0' }"
			:cell-style="{ padding: '0' }"
			size="medium"
			style="width: 100%"
			highlight-current-row
			@selection-change="handleSelectionChange"
		>
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column align="center" label="序号" type="index" width="60"> </el-table-column>
			<el-table-column align="center" property="Title" sortable label="任务名称" show-overflow-tooltip />
				<el-table-column align="center" property="evCntFormat" sortable label="物证数量" show-overflow-tooltip>
				<template #default="scope">
					{{ evCntFormat(scope.row.Attrs) }}
				</template>
			</el-table-column>
			<el-table-column align="center" property="Status" sortable label="状态" show-overflow-tooltip>
				<template #default="scope">
					{{ statusFormat(scope.row.Status) }}
				</template>
			</el-table-column>
			<el-table-column align="center" property="Creator" sortable label="创建人" show-overflow-tooltip />
			<el-table-column align="center" sortable label="创建时间" show-overflow-tooltip>
				<template #default="scope">
					{{ dateFormat(scope.row.CreateTime) }}
				</template>
			</el-table-column>
		
			<el-table-column align="center" label="操作">
				<template #default="scope">
					<el-button type="success" @click="onDetailsInfo(scope.row)" plain size="mini">详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:page-sizes="[10, 20, 50, 100]"
			:page-size="formInline.pageSize"
			layout="prev, pager, next, jumper,total,sizes"
			:total="total"
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			prev-text="上一页"
			next-text="下一页"
			background
		>
		</el-pagination>
		<el-drawer
			v-model="drawer"
			title="物证盘点详情"
			direction="rtl"
			size="70%"
		>
			<detail ref="detailRef" />
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs } from 'vue';
import detail from '/@/views/evidence/pandian/detail.vue';
import { getPanDianPager,deletePanDianTask } from '/@/api/case/index';
import { dateFormat } from '/@/common';
import { ElMessageBox, ElMessage } from 'element-plus';
export default {
	name: 'EvidenceUnitCase',
	components: { detail },
	setup() {
		const state = reactive({
			formInline: {
				caseNo: '',
				inspectionNo: '',
				caseName: '',
				caseTime: '',
				caseTimeStart:"",
				caseTimeEnd:"",
				hostUserName: '',
				hostUserOrganName: '',
				page: 1,
				pageSize: 10,
			},
			drawer:false,
			checkRecords: [],
			formInlineCase: {},
			tableData: [],
			total: 10,
		});
		const detailRef = ref();
		const onDetailsInfo = (row: any) => {
			state.drawer = true;
			if(detailRef.value){
				detailRef.value.init(row.Id);
			}else{
				setTimeout(function(){
					detailRef.value.init(row.Id);
				},200);
			}
		}; 
		const refSeach = ref();
		function onSearch() {
			init();
		}
		function onRest() {
			refSeach.value.resetFields();
		}
		function onHandleSizeChange(pageSize: number) {
			state.formInline.pageSize = pageSize;
			init();
		}
		function onHandleCurrentChange(pageIndex: any) {
			state.formInline.page = pageIndex;
			init();
		}
		function handleSelectionChange(rows:any){
			state.checkRecords = rows;
		}
		function onDelete(){
			const records = state.checkRecords;
				if (records.length < 1) {
					ElMessage({ message: '请选择要删除的盘点任务', type: 'warning' });
					return;
					false;
				}
				ElMessageBox.confirm('此操作将永久删除盘点任务, 是否继续?', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
						const ids = records.map(function (x) {
							return x.Id;
						});
						deletePanDianTask({ ids: ids }).then((res) => {
							if (res.success) {
								ElMessage({
									message: '删除成功',
									type: 'success',
								});
								init();
							}
						});
					})
					.catch(() => {});
		}
		async function init() {
			state.formInline.CaseTimeStart = '';
			state.formInline.CaseTimeEnd = '';
			if (state.formInline.caseTime && state.formInline.caseTime.length > 1) {
				state.formInline.CaseTimeStart = state.formInline.caseTime[0];
				state.formInline.CaseTimeEnd = state.formInline.caseTime[1];
			}
			await getPanDianPager(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}
		init();
		return { 
			onDetailsInfo,
			dateFormat,
			statusFormat:function(v){
				switch(v){
					case 0:return "待同步";
					case 1:return "待盘点";
					case 2:return "已盘点";
				}
			},
			evCntFormat:function(obj){
				var r1 = JSON.parse(obj);
				return r1.length;
			},
			init,
			onSearch,
			onRest,
			detailRef,
			onHandleSizeChange,
			onHandleCurrentChange,
			refSeach,
			handleSelectionChange,
			onDelete,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.el-input,
.el-select,
.el-date-picker {
	width: 220px;
}
</style>
